class Cart {
  times = '';
  constructor() {
    this.getData();
    Cart.int = this;
    this.cpCount();
    /**************全选的实现************/
    this.checkAllObj = all('.check-all');
    this.delAllObj = one('#deleteAll');
    this.checkAllObj[0].addEventListener('click', this.btnAll1);
    // console.log(this);
    this.checkAllObj[1].addEventListener('click', this.btnAll2);
    this.delAllObj.addEventListener('click', this.btnDel1);
  }
  /*******获取购物车数据进行渲染*********/
  getData() {
    // console.log(1111);
    // 1 从local中获取数据
    let carts = localStorage.getItem('carts');
    // console.log(carts);
    // 2 判断是否有数据
    if (carts) {
      // 2-1 将数据转化为对象
      carts = JSON.parse(carts);
      // console.log(carts);
      // 2-2 遍历数据进行拼接
      let str = '';
      carts.forEach(ele => {
        // console.log(ele);
        // 获取对象中的name,img,price,num 利用解构赋值
        let {
          gid,
          gname,
          gsrc,
          gprice,
          gnum
        } = ele;
        str += `<tr>
        <td class="checkbox"><input  info-id="${gid}" class="check-one check" type="checkbox"/ onclick="cartData.goodsCheck(this)"></td>
        <td class="goods"><img src="${gsrc}" alt=""/><span>${gname}</span></td>
        <td class="price">${gprice}</td>
        <td class="count">
            <span class="reduce" onclick="cartData.delGoodsNum(this,${gid})">-</span>
            <input class="count-input" type="text" value="${gnum}" onkeyup="cartData.ipGoodsNum(this,${gid})"/>
            <span class="add" onclick="cartData.addGoodsNum(this,${gid})">+</span></td>
        <td class="subtotal">￥${(gprice * gnum).toFixed(2)}</td>
        <td class="operation"><span class="delete" onclick="cartData.delGoods(this,${gid})">删除</span></td>
      </tr>`
      });
      // 2-3 追加到页面中
      $('tbody').append(str);
    } else {
      // 3 购物车中没有数据，则进行提示
      $('tbody').append("没钱还看什么购物车！快去赚钱！");
    }
  };
  btnAll1() {
    // checkAllObj[0]是第一个全选按钮
    // 2获取当前按钮的状态,然后传递
    // checked 获取复选框状态,true是选中  false是取消
    // console.log(this.checked);
    // console.log(this);
    Cart.int.checkAllGoods(1, this.checked);
  }
  btnAll2() {
    // checkAllObj[1]是第二个全选按钮
    // 2获取当前按钮的状态,然后传递
    // checked 获取复选框状态,true是选中  false是取消
    // console.log(this.checked);
    Cart.int.checkAllGoods(0, this.checked);
  }
  btnDel1() {
    // delAllObj[0]是第一个全选按钮
    // 2获取当前按钮的状态,然后传递
    // checked 获取复选框状态,true是选中  false是取消
    // console.log();
    Cart.int.delAllGoods();
  }
  /*********让所有的商品选中****.check-one*******/
  checkAllGoods(key, state) {
    // 1 获取所有商品的单选框
    let checkOnes = all('.check-one');
    // 2  循环所有的单选框,设置状态
    checkOnes.forEach(ele => {
      // console.log(ele);
      ele.checked = state;
    });
    //3  设置另一个全选按钮,为选中
    Cart.int.checkAllObj[key].checked = state;
    this.cpCount();
  }
  /***********单个商品的选中**.check-all****/
  goodsCheck(eleObj) {
    // console.log(eleObj);
    // 1如果当前是取消操作,让全选取消
    // 2 获取全选按钮
    let checkAllObj = all('.check-all');
    if (!eleObj.checked) {
      // 循环全选按钮进行取消
      checkAllObj.forEach(ele => {
        // console.log(ele);
        ele.checked = false;
      })
    } else { // 页面的元素都选中时,让全选选上
      // 3 获取页面中的所有单选框
      let checkOnes = all('.check-one');
      // console.log(checkOnes);
      // 4 记录所有商品的数量
      let len = checkOnes.length;
      // console.log(len);
      // 5 保存页面中单选选中的数量
      let counts = 0;
      checkOnes.forEach(ele => {
        // console.log(ele);
        if (ele.checked == true) {
          counts++;
        }
      });
      // 6 比对商品数量和选中的数量,相等让全选选中
      if (len == counts) {
        checkAllObj.forEach(function (ele) {
          ele.checked = true;
        })
      }
    }
    this.cpCount();
  }
  /*********计算总的价格和数量***.price**.count-input**#priceTotal**#selectedTotal**/
  cpCount() {
    // 1 获取所有商品的单选按钮
    let checkOnes = all('.check-one');
    // console.log(checkOnes);
    // 2 声明数量和保存价格的变量
    let couNum = 0;
    let totalPrice = 0;
    // 3 循环单选框,找到选中的
    checkOnes.forEach(ele => {
      // console.log(ele.checked);
      if (ele.checked) {
        // console.log(ele.checked);
        // 4 取到选中的商品价格和数量
        // 4-1 获取当前单选框所在的tr,就是爷爷辈
        let parentObj = ele.parentNode.parentNode;
        // console.log(parentObj);
        let price = parentObj.querySelector('.price').innerHTML;
        let num = parentObj.querySelector('.count-input').value;
        // console.log(price, num);
        //5 计算数量和总价
        couNum = num - 0 + couNum;
        totalPrice += num * price;
        // console.log(couNum,totalPrice);
      }
    });
    // 6 将价格和数量放到页面中
    $('#selectedTotal').html(couNum);
    $('#priceTotal').html(totalPrice.toFixed(2));
  }
  /*********添加商品数量*****/
  addGoodsNum(eleObj, gid) {
    // console.log(eleObj,gid);
    clearTimeout();
    this.times = setTimeout(function () {
      // 1 获取input框
      let inputObj = eleObj.previousElementSibling;
      // 2 取出数量,并且增加
      let count = inputObj.value;
      // console.log(count);
      // console.log(count + 1);
      count = count - 0 + 1;
      if (count > 10) {
        alert('不能再买了，每人限购哦');
        count = 10;
        return;
      }
      inputObj.value = count;
      // 3 拿到单价
      let price = eleObj.parentNode.previousElementSibling.innerHTML;
      // console.log(price);
      // 4 获取小计
      let xj = eleObj.parentNode.nextElementSibling;
      // console.log(xj);
      xj.innerHTML = (price * count).toFixed(2);
      Cart.int.cpCount();
      // 将数量添加到localstorage中
      let cartGoods = localStorage.getItem('carts');
      cartGoods = JSON.parse(cartGoods);
      cartGoods.forEach(ele => {
        if (ele.gid == gid) {
          ele.gnum = count;
        }
      });
      localStorage.setItem('carts', JSON.stringify(cartGoods));
    }, 500); // 防抖节流，固定0.5秒延迟刷新
  }
  // 输入框更改
  ipGoodsNum(eleObj, gid) {
    // console.log(eleObj,gid);
    // 1 获取input框
    let ipObj = eleObj;
    // console.log(ipObj);
    // 2 取出数量,并且增加
    let count = ipObj.value;
    // console.log(count);
    // console.log(count + 1);
    // count = count - 0 + 1;
    ipObj.value = count;
    // 3 拿到单价
    let price = eleObj.parentNode.previousElementSibling.innerHTML;
    // console.log(price);
    // 4 获取小计
    let xj = eleObj.parentNode.nextElementSibling;
    // console.log(xj);
    xj.innerHTML = (price * count).toFixed(2);
    console.log(xj.innerHTML);
    this.cpCount();
    // 将数量添加到localstorage中
    let cartGoods = localStorage.getItem('carts');
    cartGoods = JSON.parse(cartGoods);
    cartGoods.forEach(ele => {
      if (ele.gid == gid) {
        ele.gnum = count;
      }
    });
    localStorage.setItem('carts', JSON.stringify(cartGoods));
  }
  /**********减少商品数量**.reduce***/
  delGoodsNum(eleObj, gid) {
    // console.log(eleObj,gid);
    clearTimeout();
    this.times = setTimeout(function () {
      // 1 获取input框
      let inputObj = eleObj.nextElementSibling;
      // console.log(inputObj);
      // 2 取出数量,并且减少
      let count = inputObj.value;
      // console.log(count);
      // console.log(count - 1);
      count = count - 0 - 1;
      // console.log(count);
      if (count < 1) {
        alert('不能再减了，最少一个哦');
        count = 1;
        return;
      }
      // console.log($('.reduce'));
      inputObj.value = count;
      // 3 拿到单价
      let price = eleObj.parentNode.previousElementSibling.innerHTML;
      // console.log(price);
      // 4 获取小计
      let xj = eleObj.parentNode.nextElementSibling;
      // console.log(xj);
      xj.innerHTML = (price * count).toFixed(2);
      // console.log(this);
      // console.log(Cart.int);
      Cart.int.cpCount();
      // 将数量添加到localstorage中
      let cartGoods = localStorage.getItem('carts');
      cartGoods = JSON.parse(cartGoods);
      cartGoods.forEach(ele => {
        if (ele.gid == gid) {
          ele.gnum = count;
        }
      });
      localStorage.setItem('carts', JSON.stringify(cartGoods));
    }, 500);
  }
  /********删除的实现***.check-one*info-id**tbody***/
  delGoods(eleObj, gid) {
    // console.log(eleObj);
    // 1 获取tr节点
    let trObj = eleObj.parentNode.parentNode;
    // 2 判断是否选中,选中删除后重新计算价格
    let checkOne = trObj.querySelector('.check-one');
    // 删除节点
    trObj.remove();
    // 3 删除local中的数据
    let cartGoods = localStorage.getItem('carts');
    cartGoods = JSON.parse(cartGoods);
    // 4 循环所有的商品,然后删除当前操作的
    cartGoods.forEach((ele, key) => {
      if (ele.gid == gid) {
        cartGoods.splice(key, 1);
        return;
      }
    });
    // 将删除后的重新设置
    localStorage.setItem('carts', JSON.stringify(cartGoods));
    if (checkOne.checked) {
      this.cpCount();
    }
  }
  // 删除所有
  delAllGoods() {
    // 删除选中数据
    let checkOnes = all('.check-one');
    checkOnes.forEach(ele => {
      // console.log(ele);
      if (ele.checked == true) {
        console.log(ele.checked);
        // console.log(ele.parentNode.parentNode);
        ele.parentNode.parentNode.remove();
        // console.log(ele.getAttribute('info-id'));
        let gid = ele.getAttribute('info-id');
        let cartGoods = localStorage.getItem('carts');
        cartGoods = JSON.parse(cartGoods);
        // 4 循环所有的商品,然后删除当前操作的
        cartGoods.forEach((ele, key) => {
          if (ele.gid == gid) {
            cartGoods.splice(key, 1);
            return;
          }
        });
        // 将删除后的重新设置
        localStorage.setItem('carts', JSON.stringify(cartGoods));
      }
    });
    if (Cart.int.checkAllObj[1].checked) {
      $('tbody').innerHTML = "没钱还看什么购物车！快去赚钱！";
      localStorage.removeItem('carts');
    }
  }
}
let cartData = new Cart();